<template>
<!--    <dynamic-table ref="tableRef" :columns="columns" :get-list-func="fileFilelist" rowKey="fileid" :row-selection="rowSelection">-->
<!--      <template v-slot:title>-->
<!--        <a-button @click="addLicense" v-permission="{ action: 'file:upload', effect: 'disabled'}" type="primary">-->
<!--          添加证书-->
<!--        </a-button>-->
<!--&lt;!&ndash;        <a-button @click="deleteItems" :disabled="isDisabled" type="primary">&ndash;&gt;-->
<!--&lt;!&ndash;          删除&ndash;&gt;-->
<!--&lt;!&ndash;        </a-button>&ndash;&gt;-->
<!--      </template>-->
<!--    </dynamic-table>-->

  <div style="width: 90%;margin: 30px auto;">
      <template v-if="null==license">
        <a-card title="上传证书" :loading="waiting">
            <a-upload-dragger
                name="file"
                v-model:fileList="fileList"
                :customRequest="customRequest"
                @change="handleChange"
            >
              <p class="ant-upload-drag-icon">
                <inbox-outlined />
              </p>
              <p class="ant-upload-text">
                单击或拖动文件到此区域上载
              </p>
            </a-upload-dragger>
        </a-card>
      </template>
      <template v-if="null!=license">
          <a-card title="当前证书" :loading="waiting">
            <template #extra>
              <a-button type="primary" @click="deleteLicense(license?.fileid)">删除证书</a-button>
            </template>
            <a-descriptions bordered :column=1>
              <a-descriptions-item label="文件名">{{license?.originalname}}</a-descriptions-item>
              <a-descriptions-item label="文件UID">{{license?.guid}}</a-descriptions-item>
              <a-descriptions-item label="上传时间">{{formatDate(license?.uploadtime)}}</a-descriptions-item>
              <a-descriptions-item label="实体文件">
                <template v-if="exist">
                  <Tag color="green">存在</Tag>
                </template>
                <template v-if="!exist">
                  <Tag color="red">丢失</Tag>
                </template>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>
      </template>
<!--    </template>-->
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs, createVNode, computed, ref} from 'vue'
import {Descriptions, message, Modal, Spin, Upload, Tag} from 'ant-design-vue'
import {QuestionCircleOutlined} from '@ant-design/icons-vue'
import DynamicTable from '@/components/dynamic-table.vue'
import {useCreateModal} from "@/hooks"
import {fileDelete, fileFilelist, fileUpload, fileExist} from "@/api/strategy/file"
import AddModal from './add-modal.vue'
import {formatDate} from "@/utils/common"
import {columns} from "./columns"
import {hasPermission} from "@/utils/hasPermission"
import { InboxOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  name: 'license',
  components: {
    DynamicTable,
    InboxOutlined,
    [Upload.Dragger.name]: Upload.Dragger,
    [Descriptions.name]: Descriptions,
    [Descriptions.Item.name]: Descriptions.Item,
    Spin,
    Tag
  },
  setup() {
    const tableRef = ref<any>(null)

    const state = reactive({
      data: [],
      uploading: false,
      tableLoading: false,
      waiting: true,
      license: Object,
      exist: false,
      fileList: [],
      confirmLoading: false,
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          state.rowSelection.selectedRowKeys = selectedRowKeys
        },
        selectedRowKeys: []
      },
    })

    const loadLicense = async ()=>{
      state.waiting=true
      const res=await fileFilelist({page: 1, limit: 1})
      state.license=res?.data[0]
      console.log("load license",state.license)
      if(state.license){
        state.exist = await fileExist({"fileid": state.license["fileid"]})
        console.log("license exist",state.exist)
      }
      state.waiting=false
    }

    ~async function(){
      await loadLicense()
    }()

    // 删除多项
    const deleteItems = () => {
      Modal.confirm({
        title: '提示',
        icon: createVNode(QuestionCircleOutlined),
        content: '您确定要删除所有选中吗？',
        onOk: async () => {
          await fileDelete({"fileids": state.rowSelection.selectedRowKeys})
          tableRef.value.refreshTableData()
          state.rowSelection.selectedRowKeys = []
        }
      })
    }

    const deleteLicense = async (fileid) =>  {
      await fileDelete({fileids: [fileid]})
      await loadLicense()
    }

    // 添加证书
    const addLicense = () => {
      useCreateModal(AddModal, {
        callback: () => {
          loadLicense()
        }
      })
    }
    const isDisabled = computed(() => state.rowSelection.selectedRowKeys.length == 0 && hasPermission('file:delete'))

    const customRequest = (file)=>{
      console.log(file.file)
      fileUpload(file.file).then((res)=>{
        if(0>res.Code){
          file.onError(res.message, file.file)
        }else{
          file.onSuccess(res, file.file)
        }
      })
    }

    const handleChange = (info) => {
      const status = info.file.status
      if (status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        message.success(`${info.file.name} 文件上传成功.`)
        state.fileList=[]
        loadLicense()
      } else if (status === 'error') {
        message.error(`${info.file.name} 文件上传失败.${info.file.response}.`)
      }
    }

    return {
      ...toRefs(state),
      columns,
      tableRef,
      formatDate,
      customRequest,
      handleChange,
      isDisabled,
      addLicense,
      deleteItems,
      deleteLicense,
    }
  }
})
</script>
